<template>
    <div>
        <h2>页面显示</h2>
        <a href="/Add">添加页面</a><br/><br/>
        姓名:<input v-model="Find.Name" type="text"/>
        性别:
        <select v-model="Find.Sex">
            <option value="0">请选择</option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
        生日:
        <input type="date" v-model="Find.Birthday"><br/><br/>
        <input value="查询" @click="GetAll" type="button"><br/><br/>
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>邮箱</td>
                    <td>生日</td>
                    <td>城市</td>
                    <td>性别</td>
                    <td>操作</td>
                </tr>
            </thead>

            <tbody v-for="a in data">
                <tr>
                    <td>{{a.Name}}</td>
                    <td>{{a.Email}}</td>
                    <td>{{moment(a.Birthday).format("YYYY-MM-DD")}}</td>
                    <td>{{a.City}}</td>
                    <td>{{a.Sex==1?"男":"女"}}</td>
                    <td>
                        <input type="button" value="删除" @click="Del(a.Id)">
                        <input type="button" value="修改" @click="Upt(a.Id)">
                        <input type="button" value="逻辑删除" @click="UptID(a.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios'
import moment from 'moment'
import router from '@/router'

const data= ref([{
    "Id": 0,
    "Name": "",
    "Email": "",
    "Birthday": "2021-04-06",
    "City": "",
    "Sex": 0,
    "Del": true
}])

//查询传值
const Find = ref({
    Birthday : "",
    Name:"",
    Sex:0,
})

//显示
const GetAll=()=>{
    
    axios.get("https://localhost:7068/api/Vip/GetVip",{params:Find.value}).then(res=>{
  
        data.value = res.data;
    })
}

//文档就绪
onMounted(()=>{
    GetAll();
})

//删除
const Del=(ids:any)=>{
    confirm("确定删除吗");
    axios.get("https://localhost:7068/api/Vip/DeleteVip",{params:{Id:ids}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            GetAll();
        }
        else{
            alert("删除失败");
        }
    })
}

//修改
const Upt=(Id:any)=>{
    localStorage["Id"]=Id;
    location.href='/Upt';
    
}

//逻辑删除
const UptID=(Id:any)=>{
    axios.get("https://localhost:7068/api/Vip/DelID",{params:{Id:Id}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            GetAll();
        }
        else{
            alert("删除失败");
        }
    });
}

</script> 

<style scoped>

</style>